<template>
    <div>

        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>店铺管理</span>
                <el-button style="float: right; padding: 5px 8px" @click="save" type="primary">保存</el-button>
            </div>
            <el-form :model="form" label-width="80px">
                <el-form-item label="店铺名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>


                <el-form-item label="店铺公告" class="dogg">
                    <el-input type="textarea" v-model="form.bulletin"></el-input>
                </el-form-item>

                <el-form-item label="店铺LOGO">
                    <el-upload class="avatar-uploader" action="http://api.wm.v6g.cn/shop/upload"
                        :show-file-list="false" :on-success="avatarSuccess" :before-upload="beforeUpload">
                        <img v-if="form.avatar" :src="form.avatar" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>


                <el-form-item label="店铺图片">
                    <el-upload action="http://api.wm.v6g.cn/shop/upload" list-type="picture-card"
                        :on-preview="handlePictureCardPreview" :file-list='form.pics' 
                        :on-success="dpimgs"
                        :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>

                <el-form-item label="配送费">
                    <el-input v-model="form.deliveryPrice"></el-input>
                </el-form-item>

                <el-form-item label="送达时间">
                    <el-input v-model="form.deliveryTime"></el-input>
                </el-form-item>

                <el-form-item label="配送描述">
                    <el-input v-model="form.description"></el-input>
                </el-form-item>

                <el-form-item label="店铺评分">
                    <el-input v-model="form.score"></el-input>
                </el-form-item>

                <el-form-item label="店铺销量">
                    <el-input v-model="form.score"></el-input>
                </el-form-item>

                <el-form-item label="店铺活动">
                    <el-checkbox-group v-model="form.supports">
                        <el-checkbox label="VC无限橙果汁全场8折" name="type"></el-checkbox>
                        <el-checkbox label="单人特色套餐" name="type"></el-checkbox>
                        <el-checkbox label="充值满200送20" name="type"></el-checkbox>
                        <el-checkbox label="特价饮品8折抢购" name="type"></el-checkbox>
                        <el-checkbox label="满300立减50" name="type"></el-checkbox>
                    </el-checkbox-group>

                </el-form-item>

                <el-form-item label="营业时间">
                <el-time-picker is-range v-model="form.date" range-separator="至" start-placeholder="开始时间"
                        end-placeholder="结束时间" placeholder="选择时间范围">
                    </el-time-picker>
                </el-form-item>

                <el-form-item label="起送价格">
                    <el-input v-model="form.minPrice"></el-input>
                </el-form-item>
            </el-form>


        </el-card>



    </div>
</template>



<script>
import { shop,edit } from '@/api/shop.js'
export default {
    data() {
        return {
            form: {
                name: "",//店铺名称
                pics: [],
                bulletin: '',
                avatar: '',
                deliveryPrice: 0,//配送费
                deliveryTime: 0,//送达时间
                description: '',//配送描述
                score: 0,//店铺评分
                sellCount: 0,//销量
                supports: [],//活动
                date:[],//营业时间
                minPrice:0,//起送价格
            },
            addform:{},
            dialogImageUrl: '',
            dialogVisible: false,

        };
    },
    methods: {
        // 店铺图片添加
        dpimgs(res){
            console.log(res);
            this.form.pics.push( { name: '', url: res.imgUrl })
        },
        // 保存按钮（更新信息）
        save(){
            this.addform = {...this.form};
            this.addform.pics= this.form.pics.map(v=> v.url)
            edit(this.addform)

        },
        // 图片上传
        // 上传之前执行的函数
        beforeUpload(file) {
            //MIME：文件类型的描述
            let mime = ["image/jpeg", "image/png", "image/gif"]; //允许上传三种格式的图片
            const isJPG = mime.includes(file.type);
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG、PNG、GIF 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        },
        // 头像上传
        avatarSuccess(res, file) {
            console.log(res)
            this.form.avatar =res.imgUrl;
            console.log("11",this.form.avatar);
        },
        // 删除图片
        handleRemove(file, pics) {
            this.addform = {...this.form};
            this.addform.pics= pics.map(v=> v.url)
            edit(this.addform)


        },
        // 店铺照片
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
            console.log(this.dialogImageUrl);
        }
    },
    // 修改信息
    async created() {
        let res = await shop()
        console.log(res);
        this.form = res.data.data
        this.form.pics = res.data.data.pics.map(v => {
            return { name: '', url: v }
        })
    }
    ,
}

</script>

<style lang="less" scoped>
.avatar-uploader {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 148px;
    height: 148px;
    cursor: pointer;
    line-height: 146px;
    vertical-align: top;
    overflow: hidden;

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 150px;
        height: 150px;
        line-height: 150px;
        text-align: center;

    }

    img {
        width: 100%;
        height: 100%;
    }

}


.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.el-input {
    width: 300px;
}

.dogg {
    width: 380px;
}
</style>